@import "../../app.scss";

// 定义新的自定义颜色变量
$select-option-bg: #2B2E3B; // 选项背景色
$select-option-border: rgba(255, 255, 255, 0.25); // 选项边框色
$select-option-checked-bg: rgba($primary-color, 0.25); // 选中选项背景色
$field-background: #25273A; // 字段背景色

.form-field {
  margin-bottom: 24px;
  width: 100%;
  color: $text-color;

  &__header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }

  &__label {
    font-size: $font-size-large;
    color: $text-color;
    font-weight: 500;
  }

  &__required {
    color: $error-color;
    margin-left: 8px;
    font-size: $font-size-large;
  }

  &__text,
  &__textarea,
  &__single-select,
  &__multi-select,
  &__date,
  &__single-slider,
  &__double-slider,
  &__location,
  &__composite {
    background-color: $field-background;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  &__input {
    width: 100%;
    font-size: $font-size-large;
    color: $text-color;
    background-color: transparent;
    border: none;
    padding: 8px 0;
    height: 44px;
    line-height: 44px;
  }

  &__textarea-input {
    width: 100%;
    font-size: $font-size-large;
    color: $text-color;
    background-color: transparent;
    border: none;
    padding: 8px 0;
    min-height: 120px;
    line-height: 1.5;
  }

  &__date-selector {
    width: 100%;
    padding: 10px 0;
    font-size: $font-size-large;
    color: $text-color;
    display: flex;
    align-items: center;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      right: 8px;
      width: 16px;
      height: 16px;
      border-right: 2px solid rgba(255, 255, 255, 0.7);
      border-bottom: 2px solid rgba(255, 255, 255, 0.7);
      transform: rotate(45deg);
      transition: transform 0.3s;
    }
  }

  &__date-text {
    color: $text-color;
    font-size: $font-size-large;
  }

  &__slider-row {
    margin: 20px 0;
  }

  &__options-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -8px;

    &--single {
      flex-direction: column;
    }
  }

  &__option-item {
    margin: 8px;
    padding: 14px 16px;
    border-radius: 12px;
    background-color: rgba(40, 44, 55, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    &:active {
      background-color: rgba(60, 64, 75, 0.9);
      transform: translateY(1px);
    }

    &--active {
      background-color: rgba($primary-color, 0.15);
      border-color: $primary-color;
      box-shadow: 0 0 0 1px rgba($primary-color, 0.3);
    }
  }

  &__option-text {
    color: white;
    font-size: $font-size-large;
    white-space: normal;
    word-break: break-word;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    flex: 1;
    padding-left: 12px;
    line-height: 1.4;
  }

  &__radio-custom,
  &__checkbox-custom {
    display: flex;
    align-items: center;
    width: 100%;
  }

  &__radio-outer {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  &__radio-inner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: $primary-color;
    box-shadow: 0 0 4px rgba($primary-color, 0.6);
  }

  &__checkbox-outer {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  &__checkbox-inner {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    background-color: $primary-color;
    box-shadow: 0 0 4px rgba($primary-color, 0.6);
  }

  &__slider-value {
    margin-top: 16px;
    text-align: center;
    font-size: $font-size-base;
    color: $text-color-secondary;
  }

  &__slider-highlight {
    color: $primary-color;
    font-weight: 500;
  }

  &__composite {
    background-color: transparent;
    border: none;
    padding: 0;
  }

  &__composite-item {
    margin-bottom: 20px;
    padding: 12px;
    background-color: $field-background;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);

    &:last-child {
      margin-bottom: 0;
    }
  }

  &__input-group {
    display: flex;
    align-items: center;
    gap: 12px;
  }
}

// Taro native components styling
:global {
  // Styling for Taro radio
  radio {
    .wx-radio-input {
      border-color: rgba(255, 255, 255, 0.7) !important;

      &.wx-radio-input-checked {
        background-color: $primary-color !important;
        border-color: $primary-color !important;

        &::before {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          content: '';
          background-color: $primary-color;
          box-shadow: 0 0 4px rgba($primary-color, 0.6);
        }
      }
    }
  }

  // Styling for Taro checkbox
  checkbox {
    .wx-checkbox-input {
      border-color: rgba(255, 255, 255, 0.7) !important;
      border-radius: 6px !important;

      &.wx-checkbox-input-checked {
        background-color: $primary-color !important;
        border-color: $primary-color !important;
      }
    }
  }

  // Styling for Taro switch
  switch {
    .wx-switch-input {
      background-color: rgba(255, 255, 255, 0.2) !important;
      border-color: rgba(255, 255, 255, 0.3) !important;

      &.wx-switch-input-checked {
        background-color: $primary-color !important;
        border-color: $primary-color !important;
      }
    }
  }

  // Styling for Taro slider
  slider {
    margin: 15px 0;
  }

  // Styling for Taro picker text
  picker {
    width: 100%;
  }

  // 日期选择器popup样式
  .weui-picker__hd {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

    .weui-picker__action {
      color: $primary-color !important;
      font-size: $font-size-large !important;

      &:first-child {
        color: $text-color-secondary !important;
      }

      &:last-child {
        color: $primary-color !important;
      }
    }
  }

  .weui-picker__bd {
    .weui-picker__group {
      .weui-picker__mask {
        background: linear-gradient(180deg, rgba($card-background, 0.95), rgba($card-background, 0.6)) !important;
      }

      .weui-picker__indicator {
        border-top: 1px solid rgba($primary-color, 0.3) !important;
        border-bottom: 1px solid rgba($primary-color, 0.3) !important;
      }

      .weui-picker__item {
        color: $text-color !important;

        &.weui-picker__item_disabled {
          color: $text-color-light !important;
        }
      }
    }
  }

  // 微信小程序日期选择器样式
  .wx-picker {
    &-view {
      background-color: $card-background !important;
    }

    &-indicator {
      border-top: 1px solid rgba($primary-color, 0.3) !important;
      border-bottom: 1px solid rgba($primary-color, 0.3) !important;
      background-color: rgba($primary-color, 0.05) !important;
    }

    &-mask {
      background: linear-gradient(180deg, rgba($card-background, 0.95), rgba($card-background, 0.6)) !important;
    }

    &-item {
      color: $text-color !important;

      &-disabled {
        color: $text-color-light !important;
      }
    }
  }

  // 头部按钮
  .picker__btn,
  .picker-header-action,
  .wx-picker-action {
    color: $primary-color !important;
    font-size: $font-size-base !important;

    &:first-child, &.cancel {
      color: $text-color-secondary !important;
    }

    &:last-child, &.confirm {
      color: $primary-color !important;
      font-weight: 500;
    }
  }

  // 确保所有平台的"确定"按钮都是主题色
  .picker-submit,
  .picker-confirm,
  .wx-picker-confirm,
  .weui-picker__action[data-action="confirm"] {
    color: $primary-color !important;
    font-weight: 500;
  }

  // 确保所有平台的"取消"按钮都是灰色
  .picker-cancel,
  .wx-picker-cancel,
  .weui-picker__action[data-action="cancel"] {
    color: $text-color-secondary !important;
  }
}

// Override NutUI styles to fit dark theme
:global {
  .nut-input__value,
  .nut-textarea__value {
    color: $text-color !important;
    background-color: transparent;
    font-size: $font-size-large !important;
    line-height: 1.5 !important;
  }

  .nut-input,
  .nut-textarea {
    background: transparent;
    color: $text-color;
    line-height: 1.5 !important;
    vertical-align: middle !important;
  }

  .nut-cell {
    background-color: #25273A; // 更亮的单元格背景
    color: $text-color;
    border-radius: 12px;
    margin-bottom: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 16px;

    &::after {
      border-bottom: none;
    }
  }

  .nut-cell__title {
    color: $text-color;
    font-size: $font-size-large !important;
  }

  .nut-cell__value {
    color: $text-color-secondary;
    font-size: $font-size-base !important;
  }

  .nut-cell__description {
    color: $text-color-secondary;
    font-size: $font-size-base !important;
  }

  /* 确保单选和复选组件整体可见 */
  .nut-radio,
  .nut-checkbox {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin-right: 0;
    margin-bottom: 0;
    background-color: $select-option-bg;
    padding: 16px 18px;
    border-radius: 8px;
    border: 1px solid $select-option-border;
    min-height: 60px;
    color: white !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;

    &:active {
      background-color: rgba($primary-color, 0.2);
    }

    span, div, view {
      color: white !important;
      font-size: $font-size-large !important;
      line-height: 1.5 !important;
      vertical-align: middle !important;
    }
  }

  /* 确保单选和复选的图标显示 */
  .nut-radio__icon,
  .nut-checkbox__icon {
    opacity: 1 !important;
    background-color: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin-right: 14px !important;
    flex-shrink: 0;
    margin-top: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
    color: white;

    .nut-icon {
      font-size: 40px !important;
      color: #fff !important;
    }
  }

  /* 确保选中状态的图标颜色 */
  .nut-radio__icon--checked .nut-icon,
  .nut-checkbox__icon--checked .nut-icon,
  .nut-radio__icon--checked,
  .nut-checkbox__icon--checked {
    color: $primary-color !important;
  }

  .nut-radio__label,
  .nut-checkbox__label {
    color: white !important;
    font-size: $font-size-large !important;
    font-weight: 500;
    flex: 1;
    padding-left: 0 !important;
    padding-top: 0;
    white-space: normal;
    overflow: visible;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

    span, div, view {
      color: white !important;
      line-height: 1.5 !important;
      vertical-align: middle !important;
    }
  }

  .nut-radio--checked, .nut-checkbox--checked {
    background-color: $select-option-checked-bg;
    border-color: $primary-color;

    .nut-radio__label, .nut-checkbox__label {
      color: white !important;
    }
  }

  // 日期选择器和相关组件样式
  .nut-picker-roller-item {
    color: $text-color;
    font-size: $font-size-large !important;
  }

  .nut-picker-title, .nut-picker-title-text {
    color: $text-color;
    font-size: $font-size-large !important;
  }

  .nut-picker-cancel, .nut-picker-confirm {
    font-size: $font-size-large !important;
  }

  .nut-picker-confirm {
    color: $primary-color;
  }

  .nut-range {
    margin: 30px 0 20px;
  }

  .nut-range__button {
    background-color: $primary-color;
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
  }

  .nut-range__bar {
    background-color: $primary-color;
    height: 6px;
  }

  .nut-range__marks {
    color: $text-color-secondary;
    font-size: $font-size-small !important;
  }

  .nutui-popup {
    background-color: #292B3A; // 更亮的弹出层背景
  }

  // 日期选择器内容
  .nut-picker-roller, .nut-picker-roller-item-title {
    color: $text-color-secondary;
  }

  .nut-picker-roller-item-title-active {
    color: $primary-color;
    font-weight: 500;
  }

  // 调整 placeholder 样式
  .nut-input input::placeholder,
  .nut-textarea textarea::placeholder,
  .nut-input .nut-input__placeholder,
  .nut-textarea .nut-textarea__placeholder {
    font-size: $font-size-large !important;
    color: rgba(255, 255, 255, 0.5) !important;
  }

  // 确保输入状态文字也足够大
  .nut-input input,
  .nut-textarea textarea,
  .nut-input__text,
  .nut-textarea__text {
    font-size: $font-size-large !important;
    color: $text-color !important;
  }

  // 直接覆盖所有 input 和 textarea 元素
  input, textarea {
    font-size: $font-size-large !important;
  }

  // 修复基线问题
  .nut-radio,
  .nut-checkbox,
  .nut-cell,
  .nut-input,
  .nut-textarea {
    line-height: 1.5 !important;
    vertical-align: middle !important;
  }

  .nut-radio span,
  .nut-checkbox span,
  .nut-radio div,
  .nut-checkbox div {
    line-height: 1.5 !important;
    vertical-align: middle !important;
  }
}
